<template>
  <div class="page">
    <div class="page-container">
			<Header activeId="5" />
			<div class="content">
        <Bread :data="breads" />
        <Article :data="detail" :prev="prev" :next="next" :isShowPrevNext="false" />
			</div>
      <Footer />
		</div>
	</div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import Bread from '@/components/bread.vue'
import Article from '@/components/article.vue'

export default {
	components: {
    Header,
    Footer,
    Bread,
    Article
	},

  data () {
    return {
      breads: [{text: '首页', href: '/'}, {text: '石窟资讯', href: '/news'}],
      detail: {
        title: '',
        content: '',
        author: '',
        date: '',
        viewCount: 0
      },
      prev: {},
      next: {}
    }
  },

  async asyncData({ query, $service, $axios }) {
    let res = await $service.news.queryItem({
      id: query.id
    }, {
      $http: $axios
    })

    let data = res?.data?.data || {}
    data.content = data.newsContent
    data.author = data.createBy
    data.date = data.publishDate
    data.viewCount = data.hits
    data.url = `/news/item?id=${data.id}`
    return {
      detail: data,
      prev: data,
      next: data,
      breads: [{text: '首页', href: '/'}, {text: '石窟资讯', href: '/news'}, {text: data.title}]
    }
  },
}
</script>

<style lang="less" scoped>
.content {
  /deep/ .article {
    .artview_content {
      min-height: 60vh;
    }
  }
}
</style>
